<template>
  <div>
    <PageHeader @back="onBack" subTitle="返回" class="PageHeaders">
      详情
    </PageHeader>
    <div class="xq-form-wrapper" style="padding: 24px;">
      <a-row>
        <a-col :span="12">
          <a-alert
            style="width: 610px;margin-bottom: 24px;"
            show-icon
            type="warning"
            message="若员工工资已生成工资表并完成归档，则工资数据无法删除。"
            closable
          />
        </a-col>
      </a-row>
      <a-row style="margin-bottom: 24px;" type="flex" align="middle" justify="space-between">
        <a-col>
          <a-input-search v-model="empName" allow-clear placeholder="搜索员工" style="width: 180px;" @search="onSearch" />
        </a-col>
      </a-row>
      <a-spin :spinning="spinning" class="xq-form-content" style="margin-top: 24px">
        <XqTable
          :customize="FormJson['config']['table']['customize']"
          :scroll="{ x: columns.length * 150 }"
          :pagination="false"
          :dataSource="tableData"
          :columns="columns"
          class="xq-form-content-table"
        >
          <template v-for="(col, index) in columns" v-slot:[`xq_${col.dataIndex}`]>
            <span :key="index">
              {{ col.customTitle }}
            </span>
          </template>
          <!-- eslint-disable-next-line prettier/prettier -->
          <template v-for="(col, index) in columns" v-slot:[col.dataIndex]="text, record">
            <!-- <span v-if="col.dataIndex === 'gmtCreate'" :key="index">
              {{ moment(text).format("YYYY/MM/DD") }}
            </span> -->
            <!-- <span v-if="col.dataIndex === 'workingHours'" :key="index">
              <span>{{ text }}</span>
            </span> -->
            <span v-if="col.dataIndex === 'tableAction'" :key="index">
              <a @click="onMsg(record.id)">工时详情</a>
              <a-divider type="vertical" />
              <a-popconfirm
                :title="`确认要删除吗？`"
                ok-text="确认"
                cancel-text="取消"
                @confirm="onDel(record.id)"
                :disabled="record.isHandle"
              >
                <a :disabled="record.isHandle">删除</a>
              </a-popconfirm>
            </span>
            <XqTableCell v-else :key="index" :record="record" :field="FormJson['fields'][col.dataIndex]" :dynamicData="dynamicData" />
          </template>
        </XqTable>
        <div class="xq-form-content-pagination">
          <div class="xq-form-content-pagination-total">共 {{ total }} 条</div>
          <a-pagination
            v-model="pageNo"
            :page-size="pageSize"
            :total="total"
            :show-size-changer="true"
            :show-quick-jumper="true"
            :page-size-options="['10', '20', '50', '100']"
            @change="onPageChange"
            @showSizeChange="onPageSizeChange"
          />
        </div>
      </a-spin>
    </div>
    <msg :visible.sync="visible" :attendanceDataTempId="attendanceDataTempId" />
  </div>
</template>

<script>
import axios from "axios";
import qs from "qs";
import FormJson from "./FormJson";
import XqCurdMixin from "xqjr-plugin-form/mixins/XqCurdMixin";
import msg from "./component/msg";
import { getAttendanceDataInfo, delAttendanceDataTemps } from "./api";
// import moment from "moment";

const curdMixin = new XqCurdMixin({
  FormJson,
  tableConfigKey: "table"
});

export default {
  mixins: [curdMixin],
  components: {
    msg
  },
  data() {
    return {
      empName: "",
      spinning: false,
      tableData: [],
      total: 0,
      pageNo: 1,
      pageSize: 20,
      visible: false,
      attendanceDataTempId: ""
    };
  },
  created() {
    this.onGetAttendanceDataInfo();
  },
  methods: {
    async onGetAttendanceDataInfo() {
      try {
        this.spinning = true;
        const { data } = await getAttendanceDataInfo({
          empName: this.empName,
          recordId: this.$route.query.recordId,
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          isError: 0
        });
        // data.entities.forEach(e => {
        //   if (e.workingHours) {
        //     e.workingHours = JSON.parse(e.workingHours);
        //     e.workingHours = Object.keys(e.workingHours)[0];
        //   }
        // });
        this.tableData = data.entities;
        this.total = data.entityCount;
        setTimeout(() => (this.spinning = false), 500);
      } catch (err) {
        console.log("error log --> ", err);
        setTimeout(() => (this.spinning = false), 500);
      }
    },
    onPageChange(page) {
      this.pageNo = page;
      this.onGetAttendanceDataInfo();
    },
    onPageSizeChange(current, pageSize) {
      this.pageNo = 1;
      this.pageSize = pageSize;
      this.onGetAttendanceDataInfo();
    },
    onSearch() {
      this.pageNo = 1;
      this.onGetAttendanceDataInfo();
    },
    onMsg(e) {
      this.attendanceDataTempId = e;
      this.visible = true;
    },
    // onJump() {
    //   this.$router.push({
    //     name: "checkCard/imports"
    //     // query: { talentPoolTempId: this.talentPoolTempId }
    //   });
    // },
    download() {
      const token = this.$store.state.auth.token;
      let params = {};
      params = {
        // templateName: "allEmployeeSalary.xlsx"
      };
      axios({
        url: `/hr/api/v1/attendanceSallaryTemplateItems/downloadAttendanceSallaryTemplate/${this.attendanceSallaryTemplateId}`,
        params,
        paramsSerializer: param => {
          return qs.stringify(param, { indices: false });
        },
        method: "GET",
        responseType: "blob",
        headers: {
          token: token
        }
      })
        .then(res => {
          const link = document.createElement("a");
          const blob = new Blob([res.data], {
            type: "application/vnd.ms-excel"
          });
          link.style.display = "none";
          link.href = URL.createObjectURL(blob);
          link.setAttribute("download", "考勤工资模板.xlsx");
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        })
        .catch(err => {
          console.log("error log --> ", err);
        });
    },
    async onDel(e) {
      try {
        await delAttendanceDataTemps(e);
        if (this.tableData.length === 1) {
          this.pageNo > 1 ? (this.pageNo = this.pageNo - 1) : (this.pageNo = 1);
        }
        this.$notification.success({ message: "操作成功" });
        this.onGetAttendanceDataInfo();
      } catch (err) {
        console.log("error log --> ", err);
      }
    },
    onBack() {
      this.$router.go(-1);
      this.$store.commit("check/componentName", "imports");
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .PageHeaders .left2 {
  color: #c0c0c0;
  font-size: 14px;
}
::v-deep .PageHeaders .anticon-left {
  color: #c0c0c0;
}
</style>
